<template>
    <pageTabelLayout>
        <template #pageHeader>
        </template>
        <template #pageTabel>
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressDragLeaveHidesColumns="true"
                    :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                style="height:25%" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList"
                :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressDragLeaveHidesColumns="true"
                    :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady1"
                style="height:25%;margin-top:3px;" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                :rowData="table.dataList" :columnDefs="tc1" :localeText="localeText1"></AgGridVuesCopys>

            <div class="effic">
                <div ref="Efficient" class="Efficient"></div>
            </div>
            <div class="operat">
                <div ref="Operating" class="Operating"></div>
            </div>
        </template>
    </pageTabelLayout>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table';
import emitter from "@/hooks/useEventBus";
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue';
import { Form, Message, Modal } from '@arco-design/web-vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { String } from 'lodash';
import { baseURL } from '@/api/axios.config'
import axios from "axios";
import usePermission from '@/store/modules/permission'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import * as echarts from "echarts/core";

interface EfficientOperating {
    "id": any
    "remark": any
}

export default {
    name: "EfficientOperating",
    setup() {
        function doRefresh() {
            pageData.pageLoading = true
            post({
                url: "purchase/LogisticType/getPage",
                data: {
                    deleteState: 0,
                    deliveryType: pageData.dropDownData
                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {
                        table.handleSuccess(data.list);
                        gridOption.value.setRowData(data.list);
                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }

        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const rowKey = useRowKey("id");
        const tableColumns = useTableColumn([
            {
                title: "染色有效率",
                key: "workshop",
                dataIndex: "workshop",
                width: 150
            },
            {
                title: "设备编号",
                key: "machineOdd",
                dataIndex: "machineOdd",
                width: 150
            },
            {
                title: "设备类型",
                key: "controlMachineType",
                dataIndex: "controlMachineType",
                width: 150
            },
        ]);
        const tableColumns1 = useTableColumn([
            {
                title: "染缸运转率",
                key: "workshop",
                dataIndex: "workshop",
                width: 150
            },
            {
                title: "设备编号",
                key: "machineOdd",
                dataIndex: "machineOdd",
                width: 150
            },
            {
                title: "设备类型",
                key: "controlMachineType",
                dataIndex: "controlMachineType",
                width: 150
            },
        ]);


        let tc: any[] = tableColumns.map((o) => {
            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            return obj
        })
        let tc1: any[] = tableColumns1.map((o) => {
            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            return obj
        })



        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        tc = a.concat(tc)
        tc1 = a.concat(tc1)

        const pageData = reactive<{
            nameList: [],
            showAdd: boolean,
            sideTitle: string,
            dropDownData: any,
            pageLoading: boolean,
            rHeight: any,
            btnList: any[],
            isEdit: boolean
        }>({
            nameList: [],
            showAdd: false,
            sideTitle: '新增物流类型',
            dropDownData: "",
            pageLoading: false,
            rHeight: "",
            btnList: [],
            isEdit: false
        });

        onMounted(() => {
            getEcharts()
            getEcharts1()
            emitter.on("EfficientOperating", () => {
                doRefresh();
            });

        });
        //查询
        const selectHandler = () => {
            doRefresh();
        }

        const dataForm = reactive<EfficientOperating>({
            "id": null,
            "remark": '',
        })

        // 表格准备事件
        const gridOption = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
        }
        const gridOption1 = ref()
        const gridReady1 = (params: any) => {
            gridOption1.value = params.api
        }
        //导出
        const exports = () => {
            if (gridOption.value.getSelectedRows() === 0) {
                Message.error('请先勾选');
                return
            } else {
                //将表头拼接出来
                let head = "<th>类型编号</th><th>类型名称</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>"
                //拿到当前表格数据与勾选的行做筛选

                let nowRow = table.dataList.filter(function (o) {
                    return selectedRowKeys.value.indexOf(o["id"]) !== -1;
                })
                let body = "";
                nowRow.forEach(function (o) {
                    body += "<tr><td>" + o["productTypeCode"] + "</td>";
                    body += "<td>" + o["productTypeName"] + "</td>";
                    body += "<td>" + o["remark"] + "</td>";
                    body += "<td>" + o["createName"] + "</td>";
                    body += "<td>" + o["createTime"] + "</td>";
                    body += "<td>" + o["updateName"] + "</td>";
                    body += "<td>" + o["updateTime"] + "</td>";
                    body += "</tr>";
                })
                tableToXlsx(head, '产品类型', body)
                console.log(table)
            }
        }

        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`;

            const a = document.createElement('a');
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
            a.download = filename;
            a.click();
            document.removeChild(a);
        }

        const headerShow = ref<boolean>(true)

        const handleChange = (_data: any) => {
            table.handleSuccess(_data);
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width:150
        }

        const localeText1: any = ref(localeText)
        const pagingList1: any = ref(pagingList)


        const Efficient = ref<any>()
        const efficInit = ref<any>()
        const Operating = ref<any>()
        const operatInit = ref<any>()
        const getEcharts = () => {
            efficInit.value = echarts.init(Efficient.value)
            let option = {
                title: {
                    text: '染色有效率'
                },

                tooltip: {
                    trigger: 'axis',
                    formatter: '{c}%',
                },
                legend: {
                    data: ['染A', '染B']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        interval: 0,//使x轴横坐标全部显示
                        rotate: 30,//x轴文字倾斜角度
                    },
                    data: ['3月', '4月', '5月', '6月', '7月', '7月25日', '7月26日', '7月27日', '7月28日', '7月29日', '7月30日', '7月31日', '8月1日', '8月2日']
                },
                yAxis: {
                    min: (value: any) => { // 百位起最小值向下取整
                        return Math.floor(value.min / 10) * 10;
                    },
                    max: (value: any) => {  // 百位起最大值向上取整
                        return Math.ceil(value.max / 10) * 10;
                    },
                    scale: true,
                    splitLine: false,
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}%'
                    },
                },
                series: [
                    {
                        name: '染A',
                        type: 'line',
                        areaStyle: {
                            color: '#F2F2F2'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        },
                        data: [77, 77, 79, 79, 77, 80, 80, 79, 78, 79, 80, 79, 81, 84]
                    },
                    {
                        name: '染B',
                        type: 'line',
                        areaStyle: {
                            color: '#F2F2F2'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        },
                        itemStyle: {
                            normal: {
                                color: '#DB3131', //改变折线点的颜色,
                                lineStyle: {
                                    color: '#DB3131' //改变折线颜色
                                }
                            }
                        },
                        data: [75, 76, 77, 75, 78, 76, 77, 78, 79, 80, 75, 79, 76, 81]
                    }
                ]
            };
            efficInit.value.setOption(option)
        }

        const getEcharts1 = () => {
            operatInit.value = echarts.init(Operating.value)
            let option = {
                title: {
                    text: '染缸运转率'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{c}%',
                },
                legend: {
                    data: ['染A', '染B']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        interval: 0,//使x轴横坐标全部显示
                        rotate: 30,//x轴文字倾斜角度
                    },
                    data: ['3月', '4月', '5月', '6月', '7月', '7月25日', '7月26日', '7月27日', '7月28日', '7月29日', '7月30日', '7月31日', '8月1日', '8月2日']
                },
                yAxis: {
                    min: (value: any) => { // 百位起最小值向下取整
                        return Math.floor(value.min / 10) * 10;
                    },
                    max: (value: any) => {  // 百位起最大值向上取整
                        return Math.ceil(value.max / 10) * 10;
                    },
                    scale: true,
                    splitLine: false,
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}%'
                    },
                },
                series: [
                    {
                        name: '染A',
                        type: 'line',
                        areaStyle: {
                            color: '#F2F2F2'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        },
                        data: [78, 63, 52, 75, 86, 93, 89, 90, 85, 87, 91, 92, 90, 89]
                    },
                    {
                        name: '染B',
                        type: 'line',
                        areaStyle: {
                            color: '#F2F2F2',
                            origin: 'start'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        },
                        itemStyle: {
                            normal: {
                                color: '#DB3131', //改变折线点的颜色,
                                lineStyle: {
                                    color: '#DB3131' //改变折线颜色
                                }
                            }
                        },
                        data: [73, 58, 54, 74, 85, 90, 88, 93, 95, 91, 92, 92, 91, 94]
                    }
                ]
            };
            operatInit.value.setOption(option)
        }


        // originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
        // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
        const tableColumns2 = useTableColumn([
            {
                type: '选择题',
                num: '5题',
                average: '3分/题',
            },
            {
                type: '填空题',
                num: '5题',
                average: '3分/题',
            },
            {
                type: '选择题',
                num: '2题',
                average: '10分/题',
            }
            //             originTitle: ['题型', '数量', '均分'], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
            // transTitle: ['', '学生1', '学生2', '学生3'], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
            //     transData: []
        ])

        return {
            Efficient,
            Operating,
            efficInit,
            operatInit,

            pagingList1,
            localeText1,
            defaultColDef,
            tc,
            tc1,
            gridOption,
            gridOption1,
            gridReady,
            gridReady1,
            dataForm,
            selectedRowKeys,
            pagination,
            tableColumns,
            tableColumns1,
            table,
            rowKey,
            pageData,
            selectHandler,
            exports,
            headerShow,
            handleChange
        };
    },
    components: { Toolbar,  }
}
</script>
<style scoped lang="less">
.effic {
    width: 49%;
    height: 48%;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    margin-top: 10px;
}

.operat {
    width: 48%;
    height: 48%;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    float: right;
    right: 1%;
    margin-top: 10px;
}

.Efficient {
    width: 100%;
    height: 100%;
    z-index: 100;
}

.Operating {
    width: 100%;
    height: 100%;
    z-index: 100;
}
</style>